<!-- 提现 -->
<template>
	<view class="page">
		<view class="withdrawal flex flex-column">
			<view class="left flex align-center">
				<view class="text">
					提现到
				</view>
				<view class="destination flex align-center">
					<view class="icon flex justify-center align-center">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/iconss.png" mode=""></image>
					</view>
					<view class="name">
						银行卡
					</view>
				</view>
				<view class="icons flex align-center justify-center">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/linkyou.png" mode=""></image>
				</view>
			</view>
			<view class="right">

			</view>
			<view class="line">
				
			</view>
		</view>
		<view class="content">
			<view class="title">
				提现金额
			</view>
			<view class="money flex align-center">
				<view class="character">
					¥
				</view>
				<view class="input">
					<input type="number" value="" placeholder="0.00" placeholder-class="placeholder" v-model="moneyQurey.withdrawAmount"/>
				</view>
			</view>
			<!-- <view class="note">
				<text class="hui">当前余额288.00元，</text>
				<text class="lan">全部提现</text>
			</view> -->
			<view class="button flex justify-center align-center" @click="show = true">
				提现
			</view>
		</view>
		<view v-if="show">
			<view class='toast-box'>
				<view class='toastbg'></view>
				<view class='showToast'>
					<view class='toast-title'>
						<text>提现</text>
					</view>
					<view class='toast-main'>
						<view class='toast-input'>
							<input type='number' placeholder="请输入银行卡号" maxlength="19" v-model="moneyQurey.bankCardNumber"></input>
						</view>
					</view>
					<view class='toast-button'>
						<view class='button1'>
							<button @click.stop="cancel()">取消</button>
						</view>
						<view class='button2'>
							<button @click.stop="submit()">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				moneyQurey:{
					withdrawAmount:'',
					bankCardNumber:''
				}
			}
		},
		methods: {
			//提交
			async submit(){
				if(this.moneyQurey.bankCardNumber.length > 17){
					let msg = await this.$post('/userWithdrawLog/userWithdrawal',this.moneyQurey)
					this.show = false
					console.log(msg)
					if(msg.code == 200){
						await uni.navigateBack({
							delta:1
						})
					}	
					
				}else{
					await this.showToast()
				}
			},
			cancel() {
				this.show = false
				
			},
			showToast() {
				this.$refs.uToast.show({
					title: '请输入正确的银行卡号',
					type: 'error',
				})
			}
			
		}
	}
</script>

<style lang="scss">
.page{
	position: relative;
	.withdrawal{
		width: 100%;
		height: 270rpx;
		background: #f5f5f5;
		padding: 0 60rpx;
		position: relative;
		.left{
			width: 630rpx;
			margin-top: 70rpx;
			.text{
				font-weight: 500;
				color: #333333;
				font-size: 28rpx;
				margin-right: 60rpx;
				width: 85rpx;
			}
			.destination{
				.icon{
					width: 26rpx;
					height: 27rpx;
					margin-right: 20rpx;
				}
				.name{
					font-weight: bold;
					color: #333333;
					font-size: 28rpx;
				}
			}
			.icons{
				width: 15rpx;
				height: 27rpx;
				margin-left: auto;
			}
		}
		.right{
			font-weight: 400;
			color: #999999;
			font-size: 24rpx;
			margin-left: 185rpx;
		}
		.line{
			height: 20rpx;
			width: 100%;
			background: #FFFFFF;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
	.content{
		padding: 20rpx 60rpx;
		
		.title{
			font-weight: 500;
			color: #333333;
			font-size: 28rpx;
			margin-bottom: 40rpx;
		}
		.money{
			border-bottom: 1rpx solid #f5f5f5;
			.character{
				font-weight: 800;
				color: #333333;
				font-size: 80rpx;
				margin-right: 30rpx;
				width: 50rpx;
			}
			.input{
				input{
					height: 80rpx;
					font-size: 80rpx;
					font-weight: 800;
					caret-color: #0265EB;
				}
				.placeholder{
					font-size: 60rpx;
					color: #999999;
					font-weight: 400;
				}
			}
		}
		.note{
			margin-top: 30rpx;
			.hui{
				color: #999999;
				font-size: 22rpx;
			}
			.lan{
				color: #003D5F;
				font-size: 22rpx;
			}
		}
		.button{
			width: 630rpx;
			height: 80rpx;
			background: #0265EB;
			border-radius: 40rpx;
			margin-top: 160rpx;
			color: #FFFFFF;
			font-weight: bold;
			font-size: 36rpx;
			box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
		}
	}
	.toast-box {
		width: 100%;
		height: 100%;
		opacity: 1;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
	}
	
	
	.toastbg {
		opacity: 0.2;
		background-color: black;
		position: absolute;
		width: 100%;
		min-height: 100vh;
	}
	
	.showToast {
		position: absolute;
		opacity: 1;
		width: 70%;
		margin-left: 15%;
		margin-top: 40%;
	}
	
	.toast-title {
		padding-left: 5%;
		background-color: #FFFFFF;
		color: #000000;
		padding-top: 2vh;
		padding-bottom: 2vh;
		border-top-right-radius: 16rpx;
		border-top-left-radius: 16rpx;
	}
	
	.toast-main {
		padding-top: 2vh;
		padding-bottom: 2vh;
		background-color: white;
		text-align: center;
	}
	
	.toast-input {
		margin-left: 5%;
		margin-right: 5%;
		border: 1px solid #ddd;
		padding-left: 2vh;
		padding-right: 2vh;
		padding-top: 1vh;
		padding-bottom: 1vh;
	}
	
	.toast-button {
		display: flex;
	}
	
	.button1 {
		width: 50%;
	}
	
	.button2 {
		width: 50%;
	}
	
	.button1 button {
		width: 100%;
		background-color: white;
		color: red;
		border-radius: 0px;
		border-bottom-left-radius: 16rpx;
	}
	
	.button2 button {
		width: 100%;
		background-color: white;
		color: black;
		border-radius: 0px;
		border-bottom-right-radius: 16rpx;
	}
}
</style>
